<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>冲鸭</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> -->
    <!-- <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> -->
    <!-- 引入样式 -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <link rel="stylesheet" href="static/css/element-ui.css">
    <!-- 引入组件库 -->

    <script src="static/js/d3.v3.js"></script>
    <script src="static/js/vue.js"></script>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .text-center{
            text-align: center;
        }
        line.xline,
        line.yline {
            stroke-width: 1px;
            stroke: #999;
            stroke-dasharray: 5;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <div class="text-center">
                    <a target="_blank" href="https://www.processon.com/view/link/5bc41e8ee4b06fc64b1b90a6/">规划图</a>
                </div>
            </el-header>
            <el-main>
                <div>
                    <div class="text-center" v-if="!isExists">
                        本月还没有冲鸭，点击<el-button type="primary" @click="visible = true">创建一个冲鸭</el-button>
                    </div>
                    <el-dialog :visible.sync="visible" title="冲鸭，冲冲冲">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="目标">
                                <el-input v-model="form.name"></el-input>
                                冲鸭创建原则：月度可完成的目标。
                            </el-form-item>
                            <el-form-item label="目标类型">
                                <el-select v-model="form.type" placeholder="请选择目标类型">
                                    <el-option label="素养建设" value="suyang"></el-option>
                                    <el-option label="平台建设" value="pingtai"></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item label="目标历时">
                                    <el-col :span="11">
                                       
                                    </el-col>
                                    <el-col class="line" :span="2">-</el-col>
                                    <el-col :span="11">
                                        <el-date-picker type="date" placeholder="结束日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                                    </el-col>
                                </el-form-item> -->
                            <el-form-item label="详细介绍">
                                <el-input type="textarea" v-model="form.desc"></el-input>
                            </el-form-item>
                            <el-form-item label="任务分解">
                                <el-table :data="form.tasks" stripe style="width: 100%">
                                    <el-table-column prop="name" label="任务" width="180">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.name"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="desc" label="达成标准">
                                        <template slot-scope="scope">
                                            <el-input type="textarea" v-model="scope.row.desc"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="rate" label="目标占比" width="180">
                                        <template slot-scope="scope">
                                            <el-input-number size="mini" v-model="scope.row.rate"></el-input-number>
                                        </template>
                                    </el-table-column>
                                    </el-table-column>
                                    <el-table-column label="历时" width="180">
                                        <template slot-scope="scope">
                                            <el-date-picker type="date" placeholder="开始日期" v-model="scope.row.sdate"
                                                style="width: 100%;"></el-date-picker>
                                            <!-- <el-input-number size="mini" v-model="scope.row.address"></el-input-number> -->
                                            <el-date-picker type="date" placeholder="结束日期" v-model="scope.row.edate"
                                                style="width: 100%;"></el-date-picker>
                                        </template>
                                    </el-table-column>
                                    <el-table-column fixed="right" label="操作" width="100">
                                        <template slot-scope="scope">
                                            <el-button @click="onTaskDelete(scope.row)" type="text" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-button @click="onTaskAdd" type="text" size="small">添加一条任务</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onDemo">查看demo</el-button>
                                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    <div v-if="isExists" style="width:500px;margin:auto;">
                        <div style="text-align:center">本月冲鸭：{{form.name}}<el-button @click="onEdit" type="text" size="small">修改</el-button>
                            <br>
                            <el-progress type="circle" :percentage="form.percentage"></el-progress>
                        </div>
                        <el-collapse v-model="activeNames" >
                            <el-collapse-item v-for="(item , index) in form.tasks" :title="item.name" :name="index">
                                <ul>
                                    <li>完成指标：{{item.desc}}</li>
                                    <li>开始时间：{{item.sdate}}</li>
                                    <li>结束时间：{{item.sdate}}</li>
                                    <li>当前进度：{{item.percentage}}%
                                        </li>
                                    <li style="list-style:none;"><span style="opacity:0">当前进度：</span>
                                        <div style="display:inline-block;width: 200px;vertical-align: middle;">
                                            <el-slider v-model="item.percentage" @change="onItemProcessChange(item)"></el-slider>
                                            <!-- <el-progress :text-inside="true" :stroke-width="18" :percentage="item.percentage" status="success"></el-progress> -->
                                        </div> 
                                    </li>
                                    <li>历史记录：
                                        <ul>
                                            <li v-for="h in item.history">
                                                时间：{{h.date}} <br>
                                                完成：{{h.percentage}}% <br>
                                                内容：{{h.content}} <br>
                                            </li>
                                        </ul>
                                        
                                    </li>
                                </ul>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </div>
                <div id="svg_content"></div>
            </el-main>
            <el-footer>
                <div class="text-center">
                    今天的努力将是明天永恒的回忆。
                </div>
            </el-footer>
        </el-container>
        <el-dialog :visible="!login.islogin" title="欢迎登录冲鸭">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="login.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="login.password"></el-input>
                </el-form-item>
                <el-form-item style="text-align:right">
                    <el-button type="primary" @click="onLogin">登录</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog :visible="isupdate" title="牛逼，又离目标进了一步">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="history.desc"></el-input>
                </el-form-item>
                <el-form-item style="text-align:right">
                    <el-button type="primary" @click="onUpdate">保存</el-button>
                    <el-button @click="onUpdateCancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</body>
<script src="static/js/axios.js"></script>
<script src="static/js/element-ui.js"></script>
<script src="static/js/drawTable.js"></script>
<script src="main.js"></script>

</html>